<template>
  <div class="containr">
    <containrHeader></containrHeader>
    <div class="containr-body">
      <left1 @click="handleClick(0)"></left1>
      <left2 @click="handleClick(1)"></left2>
      <center ref="centerRef"></center>
      <right1></right1>
      <right2></right2>
    </div>
  </div>
</template>

<script setup>
import containrHeader from './header/index.vue'
import left1 from './left1/index.vue'
import left2 from './left2/index.vue'
import right1 from './right1/index.vue'
import right2 from './right2/index.vue'
import center from './center/index.vue'
import { ref } from 'vue'

const centerRef = ref(null)
const handleClick = (val) => {
  centerRef.value.handleSkip(val)
}
</script>

<style lang="scss" scoped>
.containr {
  width: 4560px;
  height: 1080px;
  background: url(../../assets/bg.jpg) repeat-x;
  background-size: auto 100%;
}

.containr-body {
  display: flex;
  height: calc(100% - .17rem);
}
</style>
